Qt

之

QSS

的使⽤及常⽤控件的样式设置

纯⼲货哦！

什么是

QSS

Qt Style Sheet

简称

QSS

，

Qt

的样式表，模仿

CSS

，为

Qt

界⾯设置炫酷的展⽰效果。

如何使⽤

QSS

推荐使⽤第⼆种⽅式

⽅式⼀：在界⾯中设置

不推荐使⽤

1. 

在编辑器中找到要设置样式的

.ui

⽂件，双击该⽂件，在界⾯编辑器中显⽰该⽂件

2. 

在界⾯编辑器的右侧，右键单击，在弹出的右键菜单中选择

“

改变样式表

”

字样

3. 

在弹出的

“

编辑样式表

”

框中输⼊正确的样式表代码

4. 

点击

“

应⽤

”

（或

“use”

）按钮，可以直接在编辑器界⾯中看到样式表对作⽤控件的样式改变

5. 

点击

“

确定

”

（或

“Ok”

）按钮，样式表设置完毕

操作流程图如下：

⽅式⼆：调⽤

setStyleSheet

函数设置

推荐使⽤

1. 

将

QSS

代码保存成

.qss

⽂件

2. 

在需要的类中使⽤

QFile

类，

readAll

读取

.qss

⽂件中的样式信息

3. 

将读取到的样式信息通过

setStyleSheet

设置到界⾯程序中

直接上例⼦，下⾯以为

TestWidget

类采⽤

setStyleSheet

函数设置样式表为例：

TestWidget::TestWidget(QWidget *parent) :

    QWidget(parent),

    ui(new Ui::TestWidget)

{

    ui->setupUi(this);

    QFile file(":/qss/TestWidget.qss");//

样式信息存储在了

TestWidget.qss

⽂件中

    file.open(QFile::ReadOnly);

    QString stylesheet = file.readAll();//

读取

qss

样式⽂件中的所有数据

    file.close();

    this->setStyleSheet(stylesheet);//

为当前界⾯类设置样式表

}

下⾯针对项⽬中经常⽤到的控件，总结⼀下其

QSS

样式表的使⽤。

QPushButton/QToolButton

QPushButton

与

QToolButton

的样式设置相同，现以

QToolButton

为例

QToolButton{#

按钮正常显⽰的样式

margin-right:6px;//

与右侧的距离

border-image:url(

此处填写按钮的图⽚路径

);

border-radius:4px;//

设置按钮的圆⾓

background-color:transparent;//

背景⾊继承⽗控件的颜⾊

font-family:"

微软雅⿊

";//

按钮字体的字体族

font-size:16px;//

按钮字体⼤⼩